<!-- src/components/background-candidate/tabs/EffectBackgroundTab.vue -->
<template>
    <div class="effect-content">
        <a-radio-group v-model:value="backgroundEffect" @change="handleEffectChange">
            <a-radio value="snow">雪花</a-radio>
            <a-radio value="bubble">气泡</a-radio>
            <a-radio value="empty">无</a-radio>
        </a-radio-group>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useBackground } from "@/hooks/useBackground";

const { effect, updateEffect } = useBackground();
const backgroundEffect = ref("");

function handleEffectChange(e) {
    const val = e.target.value;
    backgroundEffect.value = val;
    updateEffect(val);
}

onMounted(() => {
    backgroundEffect.value = effect.value;
});
</script>

<style lang="less" scoped>
.effect-content {
    padding: 20px;
}

:deep(.ant-radio-wrapper) {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
}
</style>
